<template>
    <div>
        <p>{{ name }}</p>
        <button @click="changeName">changeName</button>
        <p>{{ age }}</p>
        <button @click="changeAge">changeAge</button>
    </div>
</template>

<script>
import { ref, watchEffect } from 'vue';
export default {
    // watch 可以监听props data computed
    /**
     * watchEffect用于自动收集响应式数据的依赖；watch需要手动指定侦听的数据源；
     */
    setup() {
        const name = ref("name")
        const age = ref(18)

        const changeName = () => name.value = "kobe"

        const stopWatch = watchEffect(() => {   //返回值是一个停止函数,停止监听
            console.log("age", age.value);
        })

        // 消除副作用（消除上一次watch中未完成的请求）
        const stop = watchEffect((onInvalidate) => {    
            console.log("watchEffect执行!", name.value, age.value);
            const timer = setTimeout(() => {
                console.log("2s后执行的操作");
            }, 2000)
            onInvalidate(() => {    //当watch被销毁的时候就会执行这个函数
                //在这个函数中清除额外的副作用
                clearTimeout(timer)
            })
        })
        const changeAge = () => {
            age.value++
            if (age.value > 20) {       //超过20停止监听
                stopWatch()
                stop()      //消除副作用
            }
        }
        return {
            name,
            age,
            changeName,
            changeAge
        }
    }
}
</script>

<style lang="scss" scoped>
</style>